<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索部分 -->
        <el-form
          :inline="true"
          class="demo-form-inline"
          ref="requestParameters"
          :model="requestParameters"
        >
          <el-form-item label="关键字" prop="title">
            <el-input
              placeholder="根据文章标题搜索"
              v-model="requestParameters.keyword"
              @keyup.enter="handleFilter"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="state">
            <el-select
              placeholder="请选择"
              v-model="requestParameters.state"
              @keyup.enter="handleFilter"
            >
              <el-option
                v-for="item in status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <!-- // @click="onSubmit" -->
            <el-button @click="resetForm">清除</el-button>
            <el-button type="primary" @click="handleFilter">搜索</el-button>
          </el-form-item>
          <!-- @click="handleChange('add')" -->
          <!-- @click="handleChange('add')" -->
          <el-button
            class="filter-item fr"
            size="small"
            style="margin-left: 10px"
            type="success"
            icon="el-icon-edit"
            @click="handleChange('add')"
            >新增技巧</el-button
          >
        </el-form>
        <!-- 数据记录 -->
        <!-- v-if="alertText !== ''" -->
        <!-- :title="alertText" -->
        <!--   :closable="false" -->
        <el-alert :title="alertText" type="info" class="alert" show-icon>
        </el-alert>
        <!-- 数据列表 -->
        <!-- v-loading="listLoading" -->
        <!-- :key="tableKey" -->
        <!-- :data="dataList" -->
        <!-- element-loading-text="给我一点时间" -->
        <!-- fit -->
        <!-- highlight-current-row -->
        <el-table style="width: 100%" :data="dataList" :key="tableKey">
          <el-table-column align="center" label="序号" type="index">
          </el-table-column>
          <el-table-column label="文章标题">
            <template v-slot="{ row }">
              <span>{{ row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="阅读数">
            <template v-slot="{ row }">
              <span>{{ row.visits }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="录入人">
            <template v-slot="{ row }">
              <span>{{ row.username }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="录入时间">
            <template v-slot="{ row }">
              <span>{{
                row.createTime | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态">
            <template v-slot="{ row }">
              <span v-if="row.state == 1">已启用</span>
              <span v-else-if="row.state == 0">已禁用</span>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column
            align="center"
            label="操作"
            width="280"
            class-name="small-padding fixed-width"
          >
            <template v-slot="{ row }">
              <el-button type="text" @click="handPreview(row)">预览</el-button>
              <el-dialog
                title="预览文章"
                :visible.sync="preview"
                class="previewDialog"
              >
                <h3>{{ row.title }}</h3>
                <div>
                  <span>{{ row.createTime }}</span>
                  <span>{{ row.visits }}</span>
                </div>
                <div v-html="previewData.articleBody">
                  <span> </span>
                </div>
              </el-dialog>
              <el-button type="text" @click="handleStatus(row)">
                <span v-if="row.state == 1">启用</span>
                <span v-else-if="row.state == 0">禁用</span>
              </el-button>
              <!-- <span>启用</span>
                <span>禁用</span> -->
              <!-- @click="handleChange(row.id)" -->
              <el-button
                type="text"
                @click.native="handleChange(row.id)"
                :disabled="row.state == 0"
                >修改</el-button
              >
              <el-button
                type="text"
                @click="removeUser(row.id)"
                :disabled="row.state == 0"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
          <div class="pages">
            <!-- 顯示每页条数page-size -->

            <el-pagination
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              background
              layout="prev, pager, next, sizes, jumper"
              :total="Number(total)"
              :current-page="Number(requestParameters.page)"
              :page-size="Number(requestParameters.pagesize)"
              :page-sizes="[10, 20, 30, 50]"
            >
            </el-pagination>
          </div>
        </div>
        <!-- 新增标签弹层 -->
        <Dialog
          ref="articlesAdd"
          :titleInfo="titleInfo"
          :formBase="formData"
          v-on:newDataes="getList"
        ></Dialog>
        <!-- 预览组件 -->
        <!-- <Preview ref="preview" >

          </Preview> -->
      </el-card>
    </div>
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants'
import { list, detail, changeState, remove } from '@/api/hmmm/articles.js'
import Dialog from './../components/articles-add.vue'
// import Preview from './../components/articles-preview.vue'
export default {
  name: 'Articles',
  components: {
    Dialog
    // Preview
  },
  data () {
    return {
      previewData: {}, // 存放row的数据
      // title: '', // 输入框名称
      preview: false, // 预览
      tableKey: 0, // 序号
      alertText: '', //  记录条数
      // 获取列表数据
      dataList: [],
      //
      formData: {
        createTime: '',
        articleBody: '',
        id: '',
        title: this.title
      },
      total: null,
      requestParameters: {
        page: 1,
        pagesize: 7
        // keyword: this.title
        // keyword: this.title
      },
      // 父子传参 控制新增和修改标题名
      titleInfo: {
        pageTitle: '文章' // 页面标题
      }

    }
  },
  created () {
    this.getList()
    this.initialDate()
    // 键盘enter操作
    // document.onkeydown = function (e) {
    //   var key = window.event.keyCode
    //   if (key === 13) {
    //     this.handleFilter(this.requestParameters)
    //   }
    // }
  },
  computed: {
    status () {
      return status
    }
  },
  methods: {
    // 初始数据
    initialDate () {
      // 读取数据
      this.getList()
    },
    // 获取列表数
    async getList (params) {
      // const { data: { counts }, data: { items } }
      const { data: res } = await list(this.requestParameters)
      console.log(res)
      // console.log(this.requestParameters)
      this.dataList = res.items
      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
      // 获取页数
      // this.requestParameters.page = page
      // this.requestParameters.pagesize = pagesize
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.requestParameters.page = val
      this.getList()
    },
    // 刷新显示信息条数
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getList(this.requestParameters)
      }
    },
    // 搜索信息
    handleFilter () {
      this.requestParameters.page = 1
      // console.log(this.requestParameters.title)
      this.getList(this.requestParameters)
    },
    // 重置输入框数据
    resetForm () {
      this.$refs.requestParameters.resetFields()
    },
    // 添加,编辑之后表单清空
    query () {
      this.formData = {}
    },
    // 新增编辑用户
    handleChange (id) {
      this.query()
      this.$refs.articlesAdd.OpenDialogForm()
      if (id === 'add') {
        // console.log(id)

        this.titleInfo.text = '新增'
      } else {
        this.titleInfo.text = '编辑'
        this.hanldeEditForm(id)
      }
    },
    // 表单详情数据加载
    async hanldeEditForm (objId) {
      this.formData.id = objId
      // console.log(objId)
      const { data: res } = await detail({ id: objId })
      this.formData = res
      // console.log(res)
    },
    // 启用禁用
    handleStatus (val) {
      var status = ''
      if (val.state === 1) {
        val.state = 0
        status = '禁用'
      } else {
        val.state = 1
        status = '启用'
      }
      var data = {
        id: val.id,
        state: val.state
      }
      console.log(data, status)
      this.$confirm('已成功' + status + ', 是否继续?', '提示', { type: 'warning' }).then(async () => {
        const res = await changeState(data)
          .then(response => {
            this.$message.success('已成功' + status + '!')
            this.getList(this.requestParameters)
          })
          .catch(response => {
            this.$message.error(status + '失败!')
          })
        console.log('changeState' + res)
      })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 删除
    removeUser (user) {
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        await remove({ id: user })
          .then(response => {
            this.$message.success('成功删除了用户' + '!')
            this.dataList.splice(user, 1)
            this.getList(this.requestParameters)
          })
          .catch(response => {
            this.$message.error('删除失败!')
          })
      })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 关闭预览
    onClose () {
      this.preview = false
    },
    // 显示预览数据
    handPreview (row) {
      this.previewData = row
      // console.log(row)
      this.preview = true
    }

  }

}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
</style>

<style scoped lang='less'>
</style>
